<template>
  <div class="forget">
    <div class="forget-main">
      <img src="@/assets/img/login/logo.png" class="logo" alt="" />
      <section>
        <form>
          <md-field>
            <div class="inputLine">
              <p>重置密码</p>
              <input-validate
                class="input"
                v-model="info.password"
                placeholder="请输入您的密码"
                v-validate="'required|min:6'"
                name="password"
                type="password"
                data-vv-value-path="innerValue"
                data-vv-validate-on="input"
                data-vv-as="您的密码"
                :error="errors.first('password')"
              >
              </input-validate>
            </div>

            <div class="inputLine">
              <p>确认密码</p>
              <input-validate
                class="input"
                placeholder="输入确认密码"
                v-model="info.confirmPwd"
                type="password"
                name="confirm"
                v-validate="{ required: 'true', is: info.password }"
                data-vv-value-path="innerValue"
                data-vv-validate-on="input"
                data-vv-as="确认密码"
                :error="errors.first('confirm')"
              >
              </input-validate>
            </div>
            <md-button type="primary" class="confirm" @click="confirmBtn"
              >确认</md-button
            >
          </md-field>
        </form>
      </section>
    </div>
  </div>
</template>

<script>
import { InputItem, Field, Button } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
export default {
  name: "forget",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      info: {
        mobile: "",
        code: "",
        password: "",
        confirmPwd: ""
      }
    };
  },
  methods: {
    confirmBtn() {
      this.$validator.validate().then(result => {
        if (result) {
          let data = {
            mobile: this.info.mobile,
            password: this.info.confirmPwd,
            code: this.info.code
          };
          this.$ajax
            .post(this.$api.resetPassword, data)
            .then(res => {
              this.$toast.succeed(res.data.msg);
              this.$router.go(-2);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  created() {
    this.info.mobile = this.$route.params.mobile;
    this.info.code = this.$route.params.code;
  }
};
</script>

<style scoped lang="stylus">
.forget{
  background-image: url("../../assets/img/login/loginBg.png");
  background-size: 100%;
  background-repeat:no-repeat;
  padding 186px 24px 109px 24px;
}
.forget-main{
  background-color #ffffff;
  position relative;
  border-radius 20px;
  box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.3);
}
.logo{
  width: 149px;
  position absolute;
  left 50%;
  margin-left -74.5px;
  margin-top -74.5px;
}
section{
  padding 257px 60px 273px;
}
.inputLine{
  display flex;
  align-items center;
}
  .inputLine>p{
    font-size 24px;
    color #666666;
    padding-right 32px;
  }
.input{
  flex-grow: 1
}
.confirm{
  width: 252px;
  height: 64px;
  background-color #327EB9;
  border-radius 16px;
  font-size 26px;
  margin 66px auto 0;
}
.md-button.primary::after{
  border none;
}
</style>
